// 组件名称必须以大写字母开头

// 1.0 函数组件和class组件（等效）
function Welcome(props) {  // 函数组件（接受props，返回React元素）
  return (<h1>Hello, { props.name }</h1>)
}
class Welcome extends React.Component {  // class组件（使用es6的继承，返回React元素）
  render() {
    return (<h1>Hello, { props.name }</h1>)
  }
}

// 2.0 渲染组件
function Welcome(props) {
  // 自定义组件
  return (
    <div>
      <h1>Hello, This is {props.name}</h1>
      <h1>Hello, This is {props.name}</h1>
      <h1>Hello, This is {props.name}</h1>
    </div>
  );
}
const element = <Welcome name="chenwei"></Welcome>; // 生成自定义组件
ReactDOM.render(
  element, // 渲染自定义组件
  document.getElementById("root")
);

// 3.0 组合组件
class Welcome extends React.Component {
  render() {
    return (<h1>Hello, This is {props.name}</h1>)
  }
}
function App(props) {
  return (
    <div>
      <Welecom name={props.name}></Welecom>
      <Welecom name={props.name}></Welecom>
      <Welecom name={props.name}></Welecom>
    </div>
  )
}
ReactDOM.render(
  <App name='sara'></App>,
  document.getElementById('root')
)

// 4.0 props只读性
function sum (a, b) {  // 所有的props数据在组件中只能引用它而不能修改它
  return a + b;
}
